<template>
  <div class="rightDrawer" :class="headerBottom?'rightDrawerNoBottom':''">
    <el-drawer
      ref="rightDrawer"
      v-model="showDialog"
      :title="drawerTitle"
      :size="drawerSize"
      :before-close="handleClose"
      :destroy-on-close="destroyOnClose"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="pressEscClose"
      :direction="direction"
      class="ce-drawer"
    >
      <div class="ce-drawer-content">
        <slot></slot>
      </div>

      <div class="ce-drawer__footer">
        <el-button @click="closeForm">{{ cancelText }}</el-button>
        <el-button v-if="showConfirm" type="primary" :loading="loading" @click="submit()">
          {{
            loading? (confirmText != "确定"? confirmText + "中 ...": "提交中 ... "): confirmText
          }}
        </el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { getCurrentInstance, reactive } from "vue";
import { ref } from "vue";

const { proxy } = getCurrentInstance();

const props = defineProps({
  drawerTitle: {
    type: String,
    default: "编辑",
  },
  drawerSize: {
    type: String,
    default: "20%",
  },
  destroyOnClose: {
    //关闭后是否销毁组件
    type: Boolean,
    default: true,
  },
  closeOnClickModal: {
    //点击遮罩关闭
    type: Boolean,
    default: true,
  },
  pressEscClose: {
    //esc关闭
    type: Boolean,
    default: true,
  },
  direction: {
    //'rtl' | 'ltr' | 'ttb' | 'btt'
    type: String,
    default: "rtl",
  },
  confirmText: {
    type: String,
    default: "提交",
  },
  cancelText: {
    type: String,
    default: "取消",
  },
  headerBottom: {//头部是否向下bottom 20px
    type: Boolean,
    default: false,
  },

  loading: {//请求中
    type: Boolean,
    default: false,
  },

  showConfirm:{//是否显示提交按钮
    type: Boolean,
    default: true,
  },
});

const showDialog = ref(false);

function init() {
  // console.log("打开drawer: ");
  showDialog.value = true;
}
const closeForm = (done) => {
  // console.log("done: ", done);
  showDialog.value = false;
  emit("closeForm", "关闭");
};

const handleClose = (done) => {
  closeForm(done);
};
const submit = () => {
  emit("submit", "提交");
};

const close = () =>{
  showDialog.value = false;
}

//供父组件调用的方法
defineExpose({
  init,close,
});

//父组件接收的方法
const emit = defineEmits(["closeForm", "submit"]);
</script>

<style lang="scss" scoped>
@use "../modal.scss";
</style>
